文字换行

• overflow-wrap(word-wrap) 通用换行控制
• 是否保留单词
• word-break 单词内换行控制
  • 中文句子也是一个单词
• white-space 空白符换行控制

overflow-wrap 和 word-wrap

overflow-wrap - CSS：层叠样式表 | MDN

CSS Text Module Level 3

• CSS 属性 overflow-wrap 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

• 这个属性原本属于微软扩展的一个非标准、无前缀的属性，叫做 word-wrap，后来在大多数浏览器中以相同的名称实现。目前它已被更名为 overflow-wrap，word-wrap 相当于其别称。

• overflow-wrap 属性用于指定当一个不能被分开的字符串太长而不能填满其容器时，为防止其溢出，浏览器是否允许该单词中断换行。

  • normal 是默认值，只在允许的断字点换行，如空格、连字符等。
  • break-word 允许在单词或 URL 内部换行。
  • anywhere 允许在任意字符间断开，连非空格字符都可以。

word-break

word-break - CSS：层叠样式表 | MDN

CSS Text Module Level 3

• CSS 属性 word-break 指定了怎样在单词内断行。
  • normal 使用默认的换行规则。
  • break-all 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
  • keep-all CJK 文本不断行。Non-CJK 文本表现同 normal。
  • break-word **已经弃用。**效果是 word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap 的值是多少。

white-space

white-space - CSS：层叠样式表 | MDN

CSS Text Module Level 3

• CSS white-space 属性用于设置如何处理元素内的空白字符。

• 这个属性指定了两件事：
  • 空白字符是否 合并，以及如何合并。
  • 是否换行，以及如何换行。
• white-space 属性可以被指定为从下面的值列表中选择的单个关键字，或者是表示 white-space-collapse 和 text-wrap 属性的简写的两个值。
  • normal：连续的空白符会被 合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
  • nowrap：和 normal 一样 合并 空白符，但阻止源码中的文本换行。
  • pre：连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。
  • pre-wrap：连续的空白符会被保留。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。
  • pre-line：连续的空白符会被 合并。在遇到换行符或 <br> 元素时，或者根据填充行框盒子的需要换行。
  • break-spaces：与 pre-wrap 的行为相同，除了：
    • 任何保留的空白序列总是占用空间，包括行末的。
    • 每个保留的空白字符后（包括空白字符之间）都可以被截断。
    • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容——min-content——大小和最大内容——max-content——大小）。

下面的表格总结了各种 white-space 关键字值的行为：